<template>
  <div class="m-get-code">
    <canvas id="canvas" :width="width" :height="height" title="看不清？点击重新获取" @click="getNewCode"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 140
    },
    height: {
      type: Number,
      default: 50
    },
    codeLength: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      code: ''
    }
  },
  mounted() {
    this.drawPic()
  },
  methods: {
    /**
     * 随机code
     */
    changeCode() {
      let coden = ''
      let random = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ];
      for (var i = 0; i < this.codeLength; i++) {
        let index = Math.floor(Math.random() * 36) // 取得随机数的索引（0~35）
        coden += random[index] // 根据索引取得随机数加到code上
      }
      this.code = coden // 把code值赋给验证码
    },
    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 生成一个随机色
    randomColor(min, max) {
      var r = this.randomNum(min, max)
      var g = this.randomNum(min, max)
      var b = this.randomNum(min, max)
      return `rgb(${r}, ${g}, ${b})`
    },
    /**
     * 点击获取新的图片验证码
     */
    getNewCode(e) {
      e.preventDefault()
      this.drawPic()
    },
    /**
     * 绘制验证码图片
     * **/
    drawPic() {
      const str = this.code
      var width = canvas.width
      var height = canvas.height
      var ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      /**
       * 绘制背景色
       * **/
      ctx.fillStyle = this.randomColor(180, 240) // 颜色若太深可能导致看不清
      ctx.fillRect(0, 0, width, height)
      for (var i = 0; i < 4; i++) {
        var txt = str[i];  // 生成验证码
        // var txt = str[this.randomNum(0, str.length)];  // 随机生成验证码
        ctx.fillStyle = this.randomColor(60, 160) // 随机生成字体颜色
        const fontSize = this.randomNum(15, 40) // 随机生成字体大小
        if (fontSize < 14) {
          ctx.font = 20 + 'px Arial'
        } else {
          ctx.font = fontSize + 'px Arial'
        }
        var x = 10 + i * 25
        var y = this.randomNum(25, 45)
        var deg = this.randomNum(-45, 45)
        // 修改坐标原点和旋转角度
        ctx.translate(x, y)
        ctx.rotate(deg * Math.PI/180)
        ctx.fillText(txt, 0, 0)
        // 恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI/180)
        ctx.translate(-x, -y)
      }
      // 绘制干扰线 
      for (var i = 0; i < 5; i++) {
        ctx.strokeStyle = this.randomColor(40, 180)
        ctx.beginPath()
        ctx.moveTo(this.randomNum(0, width -10), this.randomNum(0, height -10))
        ctx.lineTo(this.randomNum(0, width -10), this.randomNum(0, height -10))
        ctx.stroke()
      }
      this.$emit('on-change', this.code)
      // 绘制干扰点 
      // for (var i = 0; i < 100; i++) {
      //   ctx.fillStyle = this.randomColor(0, 255)
      //   ctx.beginPath()
      //   ctx.arc(this.randomNum(0, width), this.randomNum(0, height), 1, 0, 2 * Math.PI)
      //   ctx.fill()
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.m-get-code {
  cursor: pointer;
}
</style>
